<template>
	<view class="order-pages" :style="{background:pageColor}">
		<scroll-view scroll-y class="scroll" :style="{ height: `calc(100vh - ${headerHeight}px)` }"
			:scroll-top="scrollTop" :scroll-into-view="scrollIntoView" scroll-with-animation @scroll="onScroll">
			<view class="warp">
				<view class="banner-box" :style="{background:primaryColor}">
					<image class='banner-box-img' src="https://www.peikangbao.cn/attachment/image/666/25/09/be7ca059c39f46f4aeb9718aceb12aff.png"></image>
				</view>
				<view class="content-box">
					<view class="content-box-title">{{ options.title }}</view>
					<view class="content-doctor">
						<checkbox-group @change="checkboxChange">
							<view class="content-doctor-item" v-for="(item,index) in list" :key="item">
								<view class="content-doctor-item-checkbox">
									<view class="content-doctor-item-rectangle">
										<checkbox :value="item.id" :checked="item.checked" style="transform:scale(0.7)" />
									</view>
									<view class="content-doctor-item-num">
										<view class="num-index">
											{{ index + 1 }}
										</view>
									</view>
									<view class="content-doctor-item-content">
										<text>{{ item.title }}</text>
										<text class="ml10">{{ item.show_unit }}/{{ item.price }}元</text>
									</view>
								</view>
								<view class="flex-row">
									<view class="content-doctor-item-price">
										<view class="price-title">会员价</view>
										<view class="price-num">￥{{ item.member_price }}</view>
									</view>
									<view class="content-doctor-item-calculation">
										<view class="reduction-btn" @click="reductionClick(index)">-</view>
										<input class="uni-input" type="number" v-model="item.num" />
										<view class="reduction-btn" @click="addClick(index)">+</view>
									</view>
								</view>
							</view>
						</checkbox-group>
					</view>
					<view class="remarks-box">
						<text class="remarks-box-title">备注：</text>
						<textarea @blur="bindTextAreaBlur" class="textarea" v-model="text" maxlength="200" />
					</view>
					<view class="btn-box">
						<view class="order-btn" @click="orderClick">点击下单</view>
					</view>
				</view>
				<view style="height: 350rpx;"></view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	import $util from "@/utils/index.js"
	export default {
		components: {

		},
		data() {
			return {
				headerHeight: 0,
				// list: [
				// 	{
				// 		value: null,
				// 		name: '陪诊（单人）2小时/180.00元',
				// 		price: 1000,
				// 	},
				// 	{
				// 		value: null,
				// 		name: '陪诊（单人）2小时/180.00元',
				// 		price: 1000,
				// 	},
				// 	{
				// 		value: null,
				// 		name: '陪诊（单人）2小时/180.00元',
				// 		price: 1000,
				// 	}
				// ],
				options: {},
				param: {
					page: 1,
				},
				list: {},
				listChecked: [],
				listOrder: [],
				loading: true,
				lockTap: false,
				text: '',
				ser_id: '',
				store_id: ''
			}
		},
		computed: mapState({
			configInfo: state => state.config.configInfo,
			cityList: state => state.technician.cityList,
			realtime_location: state => state.config.configInfo.realtime_location,
			service_list_type: state => state.config.configInfo.service_list_type,
			technicianParam: state => state.technician.param
		}),
		async onLoad(options) {
			this.$util.setNavigationBarColor({
				bg: this.primaryColor
			})
			let {
				title = 0,
					industry = 0
			} = options
			options.industry = industry
			this.options = options
			this.initIndex()
		},
		methods: {
			...mapActions(['getConfigInfo', 'getCityList']),
			onScroll(event) {},
			reductionClick(index) {
				if (this.list[index].num === 0) {
					return false
				}
				this.list[index].num
			},
			addClick(index) {
				if (this.list[index].num >= 100) {
					return false
				}
				this.list[index].num++
			},
			async initIndex(refresh = false) {
				await this.getList()
				this.$util.setNavigationBarColor({
					bg: this.primaryColor
				})
			},
			async getList() {
				let {
					list: oldList,
					param
				} = this
				let {
					id,
					industry = 0
				} = this.options
				if (industry * 1 > 0) {
					param.industry_id = id
				} else {
					param.cate_id = id
				}
				let {
					lat,
					lng
				} = this.location
				let {
					realtime_location
				} = this
				param = Object.assign({}, param, {
					lat,
					lng,
					sort: realtime_location ? 'type desc' : 'top desc'
				})

				let {
					city_id = 0
				} = this.technicianParam
				let {
					id: city_info_id = 0
				} = this.city_info
				city_id = city_id || city_info_id
				if (city_id) {
					param.city_id = city_id
				}
				let methodModel = realtime_location ? 'getCoachService' : 'serviceList'
				let newList = await this.$api.service[methodModel](param);
				if (this.param.page == 1) {
					this.list = newList.data.map(item => {
						return {
							...item,
							num: 1,
							checked: false
						}
					})
				} else {
					newList.data = oldList.data.concat(newList.data)
					this.list = newList.data.map(item => {
						return {
							...item,
							num: 1,
							checked: false
						}
					})
				}
				console.log(this.list, 'this.list')
				this.loading = false
				this.$util.hideAll()
			},
			checkboxChange(e) {
				const values = e.detail.value;
				console.log(values, 'values')
				this.list.forEach(item => {
					values.forEach(el => {
						if (item.id.toString() === el) {
							item.checked = true
						}
					})
				})
				console.log(this.list, 'this.list')
				// for (var i = 0, lenI = items.length; i < lenI; ++i) {
				// 	const item = items[i]
				// 	if(values.includes(item.id)){
				// 		this.$set(item,'checked',true)
				// 	}else{
				// 		this.$set(item,'checked',false)
				// 	}
				// }
			},
			async orderClick() {
				let list = this.list.filter(item => item.checked)
				
				if (list.length === 0) {
					this.$util.showToast({
						title: '请选择订单'
					})
					return
				}
				this.listChecked = this.list.filter(item => item.checked)
				
				// const arr = list.map(item => {return item.id})
				// coach_id = arr.toString()
				const arr = this.listChecked.map(item => {return item.id})
				const ser_id = arr.toString()
				const store_id = 0
				const ids = list.map(item => {
					return {
						coach_id: item.id,
						num: item.num,
						is_top: 1,
						coach_service: 1,
						service_id: item.id
					}
				})
				let url = `/user/pages/choose-technician?id=${ser_id}&store_id=${store_id}&ids=${JSON.stringify(ids)}`
				this.$util.goUrl({
					url
				})
				// this.getListOrder()
				
				// const ids = list.map(item => {
				// 	return {
				// 		coach_id: item.id,
				// 		num: item.num,
				// 		is_top: 1,
				// 		coach_service: 1,
				// 		service_id: item.id
				// 	}
				// })
				// const ids = []
				// this.listOrder.forEach(item => {
				// 	let obj = {
				// 		coach_id: item.id,
				// 		num: 0,
				// 		is_top: 1,
				// 		coach_service: 1,
				// 		service_id: ''
				// 	}
				// 	list.forEach(el => {
				// 		obj.num = el.num
				// 		obj.service_id = el.id
				// 	})
				// 	ids.push(obj)
				// })
				
				// this.listOrder 13
				
				// const params = {
				// 	ids: ids,
				// 	text: this.text,
				// }
				// console.log(params, 'params')
				return false
				

			},
			async getListOrder(refresh = false) {

				let {
					lat = 0, lng = 0, is_util_loca = 0, isIp = true
				} = this.location
				console.log(this.cityList, 'this.cityList')
				if (refresh || this.cityList.length == 0) {
					await this.getCityList({
						lat,
						lng,
						change: refresh ? 1 : this.technicianParam.city_id ? 0 : 1
					})
				}

				// let {
				// 	id: ser_id,
				// 	store_id = 0
				// } = this.options
				
				
					
				const arr = this.listChecked.map(item => {return item.id})
				const ser_id = arr.toString()
				this.ser_id = arr.toString()
				
				console.log(ser_id, 'ser_id')
				
				let url = `/user/pages/choose-technician?id=${ser_id}&store_id=${store_id}`
				this.$util.goUrl({
					url
				})
				return false
				// let {
				// 	listOrder: oldList,
				// 	param,
				// 	cityList,
				// } = this

				// let {
				// 	city_id
				// } = this.technicianParam

				// let cityIndex = cityList.findIndex(item => {
				// 	return item.id == city_id
				// })

				// if (cityIndex == -1) {
				// 	this.loading = false
				// 	this.$util.hideAll()
				// 	this.list = {
				// 		data: [],
				// 		last_page: 1,
				// 		current_page: 1
				// 	}
				// 	this.$refs.choose_city_item.open()
				// 	return
				// }


				// param = Object.assign({}, param, {
				// 	lat,
				// 	lng,
				// 	ser_id,
				// 	city_id,
				// 	store_id
				// })

				// let {
				// 	coach_format = 1
				// } = this.configInfo

				// let methodModel = coach_format == 2 ? 'typeServiceCoachList' : 'serviceCoachList'
				// console.log(param, 'param')
				// let newList = await this.$api.service[methodModel](param)
				// console.log(newList, 'newList')
				// if (this.param.page == 1) {
				// 	this.listOrder = newList.data
				// } else {
				// 	newList.data = oldList.data.concat(newList.data)
				// 	this.listOrder = newList
				// }
				// console.log(this.listOrder, 'this.listOrder')
				const ids = []
				this.listOrder.forEach(item => {
					let obj = {
						coach_id: item.id,
						num: 0,
						is_top: 1,
						coach_service: 1,
						service_id: ''
					}
					this.listChecked.forEach(el => {
						obj.num = el.num
						obj.service_id = el.id
					})
					ids.push(obj)
				})
				
				// this.listOrder 13
				
				const params = {
					ids: ids,
					text: this.text,
				}
				console.log(params, 'params')
				this.loading = false
				this.$util.hideAll()
				// let url = `/user/pages/choose-technician?id=${ser_id}&store_id=${store_id}`
				// this.$util.goUrl({
				// 	url
				// })
				
				return false
				try {
					await this.$api.order.addCar(ids)
					this.lockTap = false
					// let url = `/user/pages/order?id=${coach_id}&ser_id=${service_id}`
					// this.$util.goUrl({
					// 	url
					// })
					this.$util.goUrl({
						url: `/user/pages/order?params=${JSON.stringify(params)}`
					})
				} catch (e) {
					console.log('jinlaile2')
					this.lockTap = false
				}
			},
		}
	}
</script>


<style lang="scss">
	.warp {
		overflow: hidden;

		.banner-box {
			width: 750rpx;
			height: 360rpx;
			overflow: hidden;

			image {
				width: 750rpx;
				height: 360rpx;
			}
		}

		.content-box {
			width: 750rpx;
			border-radius: 20rpx 20rpx 0 0;
			background-color: #ffffff;
			overflow: hidden;
			margin-top: -20rpx;
			position: relative;

			.content-box-title {
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 700;
				font-size: 30rpx;
				color: #336666;
				height: 80rpx;
				line-height: 80rpx;
				padding: 0 40rpx;
				border-bottom: 1rpx solid #C9C9C9;
			}

			.content-doctor {
				.content-doctor-item {
					// display: flex;
					// align-items: center;
					// height: 60rpx;
					padding: 20rpx 40rpx;
					border-bottom: 1rpx solid #C9C9C9;

					.content-doctor-item-num {
						width: 70rpx;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 30rpx;
						color: #5A5A5A;

						.num-index {
							width: 40rpx;
							height: 40rpx;
							border: 1rpx solid #336666;
							border-radius: 30rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							font-weight: bold;
						}
					}

					.content-doctor-item-content {
						// width: 320rpx;
						font-family: Source Han Sans, Source Han Sans;
						font-weight: 400;
						font-size: 30rpx;
						color: #5A5A5A;
						margin-left: 20rpx;
					}

					.content-doctor-item-price {
						// width: 150rpx;
						display: flex;
						align-items: center;

						.price-title {
							padding: 0rpx 8rpx;
							height: 45rpx;
							background: #336666;
							font-size: 26rpx;
							color: #ffffff;
							border-radius: 6rpx 0 0 6rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							// padding-top: 5rpx;
						}

						.price-num {
							padding: 0 8rpx;
							font-size: 26rpx;
							height: 45rpx;
							color: #336666;
							border: 1rpx solid #336666;
							margin-left: 5rpx;
							border-radius: 0 6rpx 6rpx 0;
							display: flex;
							align-items: center;
							justify-content: center;
							// padding-top: 5rpx;
						}
					}

					.content-doctor-item-rectangle {
						width: 65rpx;
					}

					.content-doctor-item-calculation {
						display: flex;
						align-items: center;
						margin-left: 20rpx;
						.reduction-btn {
							width: 45rpx;
							height: 45rpx;
							display: flex;
							// align-items: center;
							justify-content: center;
							border: 1px solid #5A5A5A;
							font-size: 26rpx;
							color: #5A5A5A;
							line-height: 40rpx;
							// padding-top: 5rpx;
						}

						.uni-input {
							width: 60rpx;
							height: 42rpx;
							min-height: 26rpx;
							text-align: center;
							font-size: 26rpx;
							color: #5A5A5A;
							border-top: 1px solid #5A5A5A;
							border-bottom: 1px solid #5A5A5A;
						}
					}
				}
			}

			.remarks-box {
				padding: 10rpx 40rpx;
				display: flex;
				border-bottom: 1rpx solid #C9C9C9;

				.remarks-box-title {
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 30rpx;
					color: #5A5A5A;
					margin-top: 5rpx;
				}

				.textarea {
					height: 110rpx;
					font-size: 30rpx;
					color: #5A5A5A;
					padding: 5rpx;
				}
			}

			.btn-box {
				padding: 20rpx 0;
				display: flex;
				align-items: center;
				justify-content: center;
				border-bottom: 1rpx solid #C9C9C9;

				.order-btn {
					width: 200px;
					height: 40px;
					background: #336666;
					border-radius: 20px 20px 20px 20px;
					font-family: Source Han Sans, Source Han Sans;
					font-weight: 500;
					font-size: 16px;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.ml10 {
		margin-left: 10rpx;
	}
	.content-doctor-item-checkbox{
		display: flex;
		align-items: center;
	}
	.flex-row{
		display: flex;
		align-items: center;
		padding-left: 120rpx;
		margin-top: 20rpx;
	}
</style>